<template>
  <div class="zhiwu">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>组织机构</el-breadcrumb-item>
      <el-breadcrumb-item>职务管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">职务管理</div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="openadd()"
        >新增职务<el-icon><Plus /></el-icon
      ></el-button>
      <el-button type="primary" @click="exportexcel()">导出 </el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border id="out-table">
      <el-table-column label="序号" width="100" type="index" />
      <el-table-column label="职务名称" prop="name" width="250">
      </el-table-column>
      <el-table-column label="在职人数" prop="num"> </el-table-column>
      <el-table-column label="全职人数" prop="allnum" />
      <el-table-column label="职务说明" prop="text"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="openexit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增抽屉 -->
    <el-drawer v-model="drawer" title="新增职务" @close="close()">
      <el-form
        :model="form"
        label-width="120px"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="职务名称:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="在职人数:" prop="num">
          <el-input v-model="form.num" />
        </el-form-item>
        <el-form-item label="全职人数:" prop="num">
          <el-input v-model="form.allnum" />
        </el-form-item>
        <el-form-item label="职务说明:">
          <el-input v-model="form.text" type="textarea" />
        </el-form-item>

        <el-button type="primary" @click="add()">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form>
    </el-drawer>
    <!-- 修改弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="修改职务"
      width="30%"
      @close="closeb()"
    >
      <span class="bianji">
        <el-form-item label="职务名称:">
          <el-input v-model="bianji.name" disabled />
        </el-form-item>
        <el-form-item label="在职人数:">
          <el-input v-model="bianji.num" />
        </el-form-item>
        <el-form-item label="全职人数:">
          <el-input v-model="bianji.allnum" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="bianji.text" type="textarea" />
        </el-form-item>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="exit()"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as XLSX from "xlsx";
import fs from "file-saver";
import { ElNotification } from "element-plus";
import * as request from "@/api/gang/gang";
import { ref, onMounted } from "vue";
var tableData = ref([]);
var drawer = ref(false);
var dialogVisible = ref(false);

var ruleFormRef = ref();
//规则
var rules = ref({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  num: [{ required: true, message: "请输入", trigger: "blur" }],
  allnum: [{ required: true, message: "请输入", trigger: "blur" }],
});

var form = ref({
  name: "",
  num: "",
  allnum: "",
  text: "",
});
var bianji = ref({
  name: "",
  num: "",
  allnum: "",
  text: "",
});
//查询职务
onMounted(async () => {
  var res = await request.search_zhiwu();
  console.log(res);
  tableData.value = res.data;
});
//打开新增抽屉
var openadd = () => {
  drawer.value = true;
};
//关闭新增抽屉
var close = () => {
  drawer.value = false;
  form.value = {}
};
//新增职务
var add = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      var res = await request.add_zhiwu(form.value);
      console.log(res);
      ElNotification({
        title: "通知",
        message: "新增职务成功",
        type: "success",
        duration: 2000,
      });
      //新增完成后重新渲染页面
      var res = await request.search_zhiwu();
      tableData.value = res.data;
      //清空表单
      form.value = {};
      //关闭抽屉
      drawer.value = false;
    } else {
      ElNotification({
        title: "通知",
        message: "请检查输入信息",
        type: "error",
        duration: 2000,
      });
    }
  });
};
//删除职务
var handleDelete = async (id) => {
  var res = await request.del_zhiwu(id);
  console.log(res);
  ElNotification({
    title: "通知",
    message: "删除职务成功",
    type: "success",
    duration: 2000,
  });
  var i = tableData.value.findIndex((item) => item.id == id);
  if (i != -1) {
    tableData.value.splice(i, 1);
  }
};

//打开编辑弹框
var openexit = (zhiwu) => {
  dialogVisible.value = true;
  //回显数据
  bianji.value = zhiwu;
};
//保存编辑信息
var exit = async () => {
  var res = await request.change_zhiwu(bianji.value);
  console.log(res);
  ElNotification({
    title: "通知",
    message: "修改职务成功",
    type: "success",
    duration: 2000,
  });
  //关闭编辑框
  dialogVisible.value = false;
};
//关闭编辑弹框
var closeb = async () => {
  var res = await request.search_zhiwu();
  tableData.value = res.data;
};

//导出
var exportexcel = () => {
  excelExport(document.querySelector("#out-table"), "myexcel");
};

var excelExport = (table, filename) => {
  // workbook,
  const wb = XLSX.utils.table_to_book(table);
  console.log(wb);

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: "Verdana", sz: 13, color: "FF00FF88" },
    fill: { fgColor: { rgb: "FFFFAA00" } },
  };
  const wopts = {
    bookType: "xlsx",
    bookSST: false,
    type: "binary",
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  };
  const wbout = XLSX.write(wb, wopts);
  const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
  fs.saveAs(blob, filename + ".xlsx");
};
var s2ab = (s) => {
  if (typeof ArrayBuffer !== "undefined") {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
};
</script>

<style scoped lang="scss">
.zhiwu {
  width: 100%;
  .breadcrumb {
    font-size: 20px;
  }
  .title {
    margin: 20px 0;
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
  .el-table {
    margin-top: 20px;
  }
  .el-form {
    .el-button {
      margin: 20px;
    }
  }
  .el-drawer {
    .el-input {
      margin: 10px 0;
    }
  }
  // .bianji {
  //   .el-input {
  //     margin: 10px 0;
  //   }
  // }
}
</style>